<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="exChange"></div>
    <script>
        //对象数组
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }, {
                name: 'Top1',
                age: 23,
                gender: '男'
            }
        ]
        
        // var arr  = [ "a","b","c"]
        function renderTable(arr) {
            // 组装table字符串
            // table上面相关
            var tableStr = "<table><tbody>" +
                "<tr>" +
                "<th>姓名</th>" +
                "<th>年龄</th>" +
                "<th>性别</th>" +
                "<th>操作</th>"+
                "</tr>";
                // 生成tr
            for (var i = 0; i < arr.length; i++) {
                // console.log(arr[i]);
                // var obj = arr[i];
                if((i+1)%2===0){
                    tableStr += '<tr  style="background:red"><td>' + arr[i].name + "</td><td>" + arr[i].age + "</td><td>" + arr[i].gender + "</td><td><button index="+i+">删除</button></td></tr>"
                }else{
                    tableStr += "<tr ><td>" + arr[i].name + "</td><td>" + arr[i].age + "</td><td>" + arr[i].gender + "</td><td><button index="+i+" >删除</button></td></tr>"
                }
            }
            // 补全标签
            tableStr += "</tbody></table>";
            // console.log(tableStr);
            var ele = document.getElementsByClassName("exChange")[0];
            ele.innerHTML = tableStr;
        }
       
        renderTable(arr); 
        // 1.renderTable ：根据arr（数组对象）数组生成对应的html
        // 2.删除tr ----》 arr里的每一个对象
        // 3.先删除对象  生成新的 arr  然后再通过renderTable 去生成新的html;
        // 4.删除arr数组里的对象 ？？ --->索引 自定义属性 index="+i+";  getAttribute
        function buttonAddClick(){
            var btns = document.querySelectorAll("button");
            btns.forEach(function(item){
                // console.log(item);
                item.onclick = function(){
                    // console.log("点击了每一个按钮",item);
                    // console.log(this);
                    var index = parseInt( this.getAttribute("index"));
                    // console.log(index);
                    arr.splice(index,1);
                    // console.log(arr);
                    // 根据最新的数据重新渲染页面
                    renderTable(arr);  //生成新的table及button
                    buttonAddClick();  // 重新绑定click事件
                }
            })

        }
        buttonAddClick();

        /* 
           1.调取： renderTable生成 html --> button 
           2.获取所有的button 然后 绑定 click事件： button都会有click事件
           3.删除 arr 重新调取 renderTable生成 html --> button

           4. 重新生成的button会不会有click事件？？
           5. 解决 新生成的button需要重新绑定一次click事件
        
        */


    </script>
</body>

</html>